<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
		</style>
		<script>
			var h=document.documentElement.clientHeight;
			var w=document.documentElement.clientWidth;
			alert(h+"*"+w);
			function getP3(){
				var p=document.getElementById("p3");
				//
				var tt=p.currentStyle||document.defaultView.getComputedStyle(p,null);
				
				
				alert(p.style.height+","+tt.width);
				alert(">>>>>高度："+p.offsetHeight+"，宽度："+p.offsetWidth);
				
				alert("这个p的左顶点的位置在x="+p.offsetLeft+",y="+p.offsetTop);
			}
		</script>
	</head>
	<body>
		<div id="d1" style="height: 200px; width:300px;border: 2px solid red;"></div>
		<div id="d2" style="height: 400px; width:300px;border: 2px solid red;"></div>
		<p id="p3" style="height: 109px;border: 4px outset blue;">
			We change lives
		</p>
		<input type="button" value="获得p的高度" onclick="getP3()"/>
	</body>
</html>
